{% extends "_layout.html" %}
{% import "component/statistics.njk" as statistics %}

{# 样式代码 #}
{% block style %}
<title>发帖</title>
{% endblock %}

{# bodyd代码#}
{% block body %}
<div class="mui-content">
    <div class="mui-page-content">
        <div class="row mui-input-row bbs-posting xw-border-bottom">
            <input type="text" name="titles" id="titles" value="" placeholder="帖子标题" />
        </div>
        <div class="row mui-input-row bbs-posting">
            <textarea id='question' class="mui-input-clear question" placeholder="请输入帖子内容"></textarea>
            <div class="image-list">
                <!--照片添加 -->
                <div class="z_photo">
                    <div class="z_file">
                        <input type="file" name="file" id="file" value="" accept="image/*" multiple onchange="imgChange('z_photo','z_file');" />
                    </div>
                </div>

                <!--遮罩层-->
                <div class="z_mask">
                    <!--弹出框-->
                    <div class="z_alert">
                        <p>确定要删除这张图片吗？</p>
                        <p>
                            <span class="z_cancel">取消</span>
                            <span class="z_sure">确定</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="bbs-sumit-btn">
            <input class="login-submit" type="submit" value="发布"/>
        </div>

    </div>
</div>
{% endblock %}

{#js代码#}
{% block js %}
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    //px转换为rem
    (function(doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if (clientWidth >= 640) {
                    docEl.style.fontSize = '100px';
                } else {
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

    function imgChange(obj1, obj2) {
        //获取点击的文本框
        var file = document.getElementById("file");
        //存放图片的父级元素
        var imgContainer = document.getElementsByClassName(obj1)[0];
        //获取的图片文件
        var fileList = file.files;
        //文本框的父级元素
        var input = document.getElementsByClassName(obj2)[0];
        var imgArr = [];
        //遍历获取到得图片文件
        for (var i = 0; i < fileList.length; i++) {
            var imgUrl = window.URL.createObjectURL(file.files[i]);
            imgArr.push(imgUrl);
            var img = document.createElement("img");
            img.setAttribute("src", imgArr[i]);
            var imgAdd = document.createElement("div");
            imgAdd.setAttribute("class", "z_addImg");
            imgAdd.appendChild(img);
            imgContainer.appendChild(imgAdd);
        };
        imgRemove();
    };

    function imgRemove() {
        var imgList = document.getElementsByClassName("z_addImg");
        var mask = document.getElementsByClassName("z_mask")[0];
        var cancel = document.getElementsByClassName("z_cancel")[0];
        var sure = document.getElementsByClassName("z_sure")[0];
        for (var j = 0; j < imgList.length; j++) {
            imgList[j].index = j;
            imgList[j].onclick = function() {
                var t = this;
                mask.style.display = "block";
                cancel.onclick = function() {
                    mask.style.display = "none";
                };
                sure.onclick = function() {
                    mask.style.display = "none";
                    t.style.display = "none";
                };

            }
        };
    };



    mui(".bbs-sumit-btn").on('tap','input[type="submit"]',function(){
        let id = location.search.substr(4);
        $('.login-submit').attr('disabled','disabled');
        let title = $('#titles').val();
        let cont = $('#question').val();

        mui.post('/posting', {
            forumId: id,
            content: cont,
            typeName:1,
            title:title,
            intro:cont,
        },function(data){
            if(data.code!=200){
                mui.toast(data.message);
            }else{
                $('.login-submit').attr('disabled','disabled');
                mui.toast('发布成功');
                window.location.replace("/bbscont?id="+id);
            }
        },'json');
    });

</script>
<!--flotdemo-->
{% endblock %}
